<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"> 

    <f:view contentType="text/html">
        <h:head>
            <f:facet name="first">
                <meta http-equiv="X-UA-Compatible" content="EmulateIE8" />
                <meta content='text/html; charset=UTF-8' http-equiv="Content-Type"/>
                <title>Criar Noticia</title>
            </f:facet>

            <link type="text/css" rel="stylesheet" href="#{request.contextPath}/css/default.css" />
            <link type="text/css" rel="stylesheet" href="#{request.contextPath}/css/syntaxhighlighter/syntaxhighlighter.css" />

  
        </h:head>


        <h:body>

            <p:layout style="width:1280px;height:720px" >

                <p:layoutUnit id="right" position="east" minSize="100" maxSize="400"  collapsible="true"
                 header="Geo News" resizable="true" closable="false" style="text-align:justify">
                 <h:form id="frm">   
                 
                 		<h:panelGrid columns="2"  cellspacing="10px" > 
	               			<p:inputText />                  		                 		
    	   					<h:button image="busca.ico" />       		
        				</h:panelGrid>
         				
         				<h:panelGrid columns="1"  cellspacing="10px" >  
         				
            				<h:panelGroup>  
            					<h:outputText value="Zoom: "/>  
            					<h:outputText id="output" value="#{sliderBean.number2}"/>  
        					</h:panelGroup>
        					
					        <h:inputHidden id="txt2" value="#{sliderBean.number2}" />  
        					<p:slider for="txt2" display="output" style="width:200px" />  
        					
					    </h:panelGrid>
         				</h:form>
         				<h:form>
                 		<p:accordionPanel>
                        <p:tab title="Criar Noticia">  
                        	<h:form id="frmNoticia">                     
							<p:panel>
						
							<h:outputLabel for="titulo" value="Titulo:" />
							<p:inputText id="titulo" 
								 required="true" value="#{noticiaController.id}">
								<f:validateLength minimum="2" />
							</p:inputText>
											
							<br />
							
							<h:outputLabel for="subtitulo" value="Subtitulo:" />
							<p:inputText id="subtitulo" 
							 required="true" value="#{noticiaController.titulo}"/>	
							 					
							<br />
							
							<h:outputLabel for="descricao" value="Descrição:"/>
							<br />
							<p:inputTextarea rows="3" cols="20" id="descricao" value="#{noticiaController.texto}" />			
							<br />
							
							<h:outputLabel for="imagem" value="Imagem:"/>						
							   <p:fileUpload value="#{fileUploadController.file}" mode="simple"/> 
							                 			
               				<br />	 
               				<h:outputLabel for="links" value="Links:"/>
               				
               				<br />
               				
							<p:inputText id="link1" 
							 required="false" label="link1" />
							 <br />
							 <p:inputText id="link2" 
							 required="false" label="link2"   />
							 <br />
							 <p:inputText id="link3" 
							 required="false" label="link3"  />	
							 
							<br />
							<br />	
							<p:commandButton value="Criar Noticia" ajax="false"  action="#{noticiaController.salvar}" />							            
							</p:panel>
												
							</h:form>
							
                        </p:tab>
                    </p:accordionPanel> 


                    </h:form>
							<h:form>
	
    					<p:dataGrid var="car" value="" columns="3">  
        					<p:panel header="Comentários" style="text-align:center">  
            					<h:panelGrid columns="2" style="width:100%"> 
            						<p:graphicImage value="igor.jpg" height="40px" width="40px"/> 
                					<h:outputText value="Comentário" />  
                					<p:graphicImage value="igor.jpg" height="40px" width="40px"/> 
                					<h:outputText value="Comentário" />  
                					<p:graphicImage value="igor.jpg" height="40px" width="40px"/> 
                					<h:outputText value="Comentário" /> 
                					<p:graphicImage value="igor.jpg" height="40px" width="40px"/>  
                					<h:outputText value="Comentário" />  
            					</h:panelGrid>  
        					</p:panel> 
    					</p:dataGrid>  
				
					
					<p:accordionPanel>
                        <p:tab title="Histórico">  
            					<h:panelGrid columns="2" style="width:100%"> 
            						<p:graphicImage value="igor.jpg" height="40px" width="40px"/> 
                					<h:outputText value="Noticia A" />  
                					<p:graphicImage value="igor.jpg" height="40px" width="40px"/> 
                					<h:outputText value="Noticia B" />  
                					<p:graphicImage value="igor.jpg" height="40px" width="40px"/> 
                					<h:outputText value="Noticia C" /> 
                					<p:graphicImage value="igor.jpg" height="40px" width="40px"/>  
                					<h:outputText value="Noticia D" />  
                					<p:graphicImage value="igor.jpg" height="40px" width="40px"/>  
                					<h:outputText value="Noticia E" />
                					<p:graphicImage value="igor.jpg" height="40px" width="40px"/>  
                					<h:outputText value="Noticia F" />
                					<p:graphicImage value="igor.jpg" height="40px" width="40px"/>  
                					<h:outputText value="Noticia G" />
                					<p:graphicImage value="igor.jpg" height="40px" width="40px"/>  
                					<h:outputText value="Noticia H" />
                					<p:graphicImage value="igor.jpg" height="40px" width="40px"/>  
                					<h:outputText value="Noticia I" />
                					<p:graphicImage value="igor.jpg" height="40px" width="40px"/>  
                					<h:outputText value="Noticia J" />
            					</h:panelGrid>    

                        </p:tab>
                    </p:accordionPanel>
                    
					</h:form>
                </p:layoutUnit>

                <p:layoutUnit id="center" position="center" style="width:1280px;height:720px">
                    <h:form>

			 	   	
				
        	       	<p:gmap id="gmap" center="-15.608736,-56.063686" zoom="16" type="HYBRID"   
        				style="width:1280px;height:720px" model="#{mapController.simpleModel}" 
						onPointClick="handlePointClick(event);" widgetVar="map" />		
					<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
   	<script type="text/javascript">
	var currentMarker = null;
	
	function handlePointClick(event) {
		if(currentMarker == null) {
			document.getElementById('lat').value = event.latLng.lat();
			document.getElementById('lng').value = event.latLng.lng();

			currentMarker = new google.maps.Marker({
				position:new google.maps.LatLng(event.latLng.lat(), event.latLng.lng())
			});
							
			map.addOverlay(currentMarker);

			//bottom.show();
		}	
	}

	function markerAddComplete() {
		var title = document.getElementById('title');
		currentMarker.setTitle(title.value);
		title.value="";

		currentMarker = null;
//		bottom.hide();
	}

	function cancel() {
	//	bottom.hide();
		currentMarker.setMap(null);
		currentMarker = null;

		return false;
	}
</script>
 				 		
                 </h:form>
         </p:layoutUnit>
             <p:layoutUnit id="bottom" position="south" size="200">    
             <h:form>
                <h:dataTable id="tblNoticia" var="c" value="#{noticiaController.noticias}">
			<h:column>
				<f:facet name="header">Titulo</f:facet>
				<h:outputText value="#{c.id}"/>
			</h:column>
			<h:column>
				<f:facet name="header">Subtitulo</f:facet>
				<h:outputText value="#{c.titulo}"/>
			</h:column>
			<h:column>
				<f:facet name="header">Noticia</f:facet>
				<h:outputText value="#{c.texto}"/>
			</h:column>
			<h:column >
				<f:facet name="Links"></f:facet>
				<h:outputText value="#{c.palavrasChave}" />
			</h:column>

		</h:dataTable>
		</h:form>
               </p:layoutUnit>
            </p:layout>


        </h:body>

    </f:view>
</html>